<template>
  <div>
    <personTop headline="精彩跟帖"></personTop>
    <!-- 精彩跟帖 -->
    <div class="comment" @click="replyTarget">
      <comment :comment="item" v-for="(item,index) of commentList" :key="index"></comment>
    </div>
    <commetntText :isShowCommetntText="isShowCommetntText" @CommenSendClick="CommenSendClick"></commetntText>
  </div>
</template>

<script>
import personTop from "../components/personTop";
import comment from "../components/comment/comment";
import commetntText from "../components/comment/commentText.vue";

export default {
  data() {
    return {
      commentList: [],
      parent_id: undefined,
      isShowCommetntText: false
    };
  },
  methods: {
    // ! 点击发送评论
    CommenSendClick(value) {
      // console.log(this.parent_id);
      this.$axios({
        method: "post",
        url: `/post_comment/` + this.$route.query.id,
        data: {
          content: value,
          parent_id: this.parent_id
        }
      }).then(res => {
        console.log(res);
        this.parent_id = undefined;
      });
         this.getComment()
    },
    // ! 回复事件委托
    replyTarget(e) {
      if (e.target._prevClass == "reply") {
        const parent_id = e.target.getAttribute("data-replyId");
        // this.isShowComment = false;
        this.isShowCommetntText = !this.isShowCommetntText;
        this.parent_id = parent_id;
      }
    },
    // 请求评论数据
    getComment(){
 this.$axios({
      method: "get",
      url: `/post_comment/${this.$route.query.id}`
    }).then(res => {
      const { data } = res.data;
      this.commentList = data;
    });
    }
  },
  mounted() {
   this.getComment()
  },
  components: {
    personTop,
    comment,
    commetntText
  }
};
</script>

<style>
</style>